<!doctype html>
<html class="no-js" lang="en">
	<head>
		<meta charset="utf-8">
		<title>Our first responsive web page with HTML5 and CSS3</title>
		<meta name="description" content="A basic responsive web page – an example from Chapter 1">
		<meta name="viewport" content="width=device-width">
		<link rel="stylesheet" href="css/styles.css">
	</head>
	<body>
		<div class="Header">
			<a href="/" class="LogoWrapper"><img src="https://images.gitee.com/uploads/images/2019/0104/234420_a3e65f9f_1648221.jpeg" alt="Scone O'Clock logo" /></a>
			<p class="Strap">权利的游戏——史塔克家族人物介绍</p>
		</div>
		<div class="IntroWrapper">
			<p class="IntroText">布兰登·史塔克（Brandon Stark）是乔治·R·R·马丁的长篇史诗奇幻小说《冰与火之歌》中的人物，书中主要的POV人物角色之一。角色性格设定喜爱冒险，勇敢富有理性，善良聪明。</p>
			<div class="MoneyShot">
				<img class="MoneyShotImg" src="https://images.gitee.com/uploads/images/2019/0104/234707_41a80830_1648221.jpeg" alt="Incredible scones" />
				<p class="ImageCaption">Incredible scones, picture from Baidu.</p>
			</div>
		</div>
		<p>Old stories are like old friends. </p>
		<p>You have to visit them from time to time.</p>
		<p>——Brandon Stark</p>
		<img class="MoneyShotImg" src="https://images.gitee.com/uploads/images/2019/0104/234731_8e86f7ea_1648221.jpeg" alt="Incredible scones" />
		<div class="Ingredients">
			<h3 class="SubHeader">角色设定</h3>
			<ul>
				<li>全名：布兰登·史塔克（Brandon  Stark）</li>
				<li>头衔：最后的绿先知</li>
				<li>外貌特征：栗色头发，棕色眼睛，从母亲那里继承了徒利家族的外貌。</li>
				<li>出生地：北境的临冬城</li>
				<li>出生时间：伊耿历290年（290AL）</li>
				<li>冰原狼：Summer（为保护布兰被一群尸鬼凶残的杀死）</li>
				<li>喜欢的活动：残疾前布兰最爱的活动是攀爬临冬城城墙</li>
				<li>亲人：父亲，母亲，哥哥，姐姐和弟弟</li>
			</ul>
		</div>
		<div class="HowToMake">
			<h3 class="SubHeader">那个男孩</h3>
			<ol class="MethodWrapper">
				<li>布兰有一只名叫夏天（Summer）的冰原狼，并且他具有狼灵的能力，可以与狼精神相通。他还是一位绿先知，有时会做预言的梦。</li>
				<center><img src="https://images.gitee.com/uploads/images/2019/0104/234759_378302dd_1648221.jpeg"/> <img align="value" /></center>
				<P>  </P>
				<li>从从阿多死后，目睹人在宿命洪流里如此渺小的他，精神面貌已经彻底被粉碎重建了。</li>
				<li>在临冬城那个活泼可爱满脑子骑士梦的十岁男孩，和如今面若冰霜的瘸腿先知完全判若两人。</li>
				<center><img src="https://images.gitee.com/uploads/images/2019/0104/234821_9ff647c9_1648221.jpeg"/> <img align="value" /></center>
				<p>  </p>
				<li>布兰第一次打击是断了双腿，醒来后跟哥哥说自己希望自己已经死了。后来提利昂的到来让他再次能策马奔腾，他才渐渐乐观起来.</li>
				<li>可紧接着，父亲逝去，家族城堡被朝夕相处的兄弟叛夺，自己敬爱的教头罗德里克在自己面前被砍头，眼睁睁地看着给自己接生的鲁温学士流血而尽，阿多，玖健，夏天，他在乎一切都在他面前一个个死去。</li>
				<center><img src="https://images.gitee.com/uploads/images/2019/0104/234854_2dc9fb0b_1648221.jpeg" align="middle" /></center>
				<P>  </P>
				<li>这一件件的不幸，已经把过去的布兰彻底抹除了，伊盟学士对雪诺说“杀死心中的男孩”，可布兰才是唯一做到这点的。布兰只有十几岁，灵魂却已和伊蒙学士，三眼乌鸦这些人一样苍老。</li>
				<li>他的章节里总是有一种阴郁又沉稳的力量，他年纪虽小心思却无比细腻，天资聪颖的他可以说是史塔克家最出色的孩子。布兰已经经历得够多了，现在我只希望凛冬的寒风吹过之后，春晓的梦想能在他心里再次发芽。</li>
			    <center><img src="https://images.gitee.com/uploads/images/2019/0104/234926_a061e33d_1648221.jpeg"/> <img align="value" /><center/>
				<P>  </P>
			</ol>
		<style>* {
	box-sizing: border-box;
}

body {
	background:#F6F6F6 url(https://images.gitee.com/uploads/images/2019/0104/234615_8bbec5d0_1648221.jpeg);
	background-size:100%;
	background-attachment: fixed;
	padding: 1rem .5rem;
	font-size: 1.3rem;
	line-height: 1.2;
	max-width: 60rem;
	margin: 0 auto;
	color: 	000000;
}

img {
	max-width: 100%;
}

.Header {
	text-align: center;
	border-bottom: 8px double #f9f9f9;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
}

.Strap {
	font-size: 3rem;
}


.MoneyShot {
	position: relative;
}

.MoneyShotImg {
	border: 6px solid ccffcc;
	border-radius: 4px;
}

.LogoWrapper {
	display: block;
}

.ImageCaption {
	font-size: .75rem;
	position: absolute;
	bottom: .5rem;
	right: 1rem;
}

.IntroText {
	font-size: 2rem;
	font-style: italic;
}

.MethodWrapper li {
	padding: .4rem 0;
}

.MethodWrapper li:after {
	content: "鉁?;
	display: block;
	text-align: center;
	margin: 1rem 0 .5rem 0;
	color: #eee;
}

@media screen and (min-width: 50rem) {
	body {
		border-left: 4px solid #f9f9f9;
		border-right: 4px solid #f9f9f9;
		padding: 1rem 2rem;
	}

	.IntroWrapper {
		display: table;
		table-layout: fixed;
		width: 100%;
	}

	.MoneyShot,
	.IntroText {
		display: table-cell;
		width: 50%;
		vertical-align: middle;
		text-align: center;
	}

	.IntroText {
		padding: .5rem;
		font-size: 2.5rem;
		text-align: middle;
		position: relative;
		
	}

	.Ingredients {
		font-size: 1.2rem;
		float: middle;
		padding: 1rem;
		margin: 0 0 .5rem 1rem;
		border-radius: 3px;
		background-color: #2F4F4F;
		border: px solid #2F4F4F;
		background-color:rgba(0,0,0,0.5)
	}

	.Ingredients h3 {
		margin: 0;
	}
}
</style>
		</div>
	</body>
</html>
